<template>
  <div class="bg-card text-card-foreground border-border flex items-center justify-between border-t px-4 py-3 sm:px-6">
    <div>
      <p class="text-sm text-muted-foreground">
        一共检索到 <span class="font-medium total-num">{{ totalItems }}</span> 条信息
      </p>
    </div>
    <div class="flex items-center space-x-2">
      <button @click="prevPage" :disabled="currentPage === 1" class="btn btn-secondary btn-sm"
        :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }">
        上一页
      </button>
      <span class="text-sm text-muted-foreground">
        {{ currentPage }} / {{ totalPages }}
      </span>
      <button @click="nextPage" :disabled="currentPage === totalPages" class="btn btn-secondary btn-sm"
        :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }">
        下一页
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits, onMounted, watch } from 'vue'

const props = defineProps(['tableData'])

const currentPage = ref(1)
const pageSize = ref(10)
const emits = defineEmits(['alltabledata'])
const daadasd = ref([])
//
const totalItems = computed(() => {
  currentPage.value = 1
  daadasd.value = props.tableData.slice(0, 10)
  emits('alltabledata', daadasd.value)
  return props.tableData.length
})

const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value))
const startIndex = computed(() => (currentPage.value - 1) * pageSize.value)
const endIndex = computed(() =>
  Math.min(startIndex.value + pageSize.value, totalItems.value),
)
const displayedPersonnelData = computed(() => {
  emits('alltabledata', props.tableData.slice(startIndex.value, endIndex.value))
  return props.tableData.slice(startIndex.value, endIndex.value)
})
const prevPage = () => {
  if (currentPage.value > 1) currentPage.value--
  emits('alltabledata', displayedPersonnelData.value)
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) currentPage.value++
  emits('alltabledata', displayedPersonnelData.value)
}


onMounted(() => {
  displayedPersonnelData.value
})
</script>

<style lass="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  /* 按钮居中对齐 */
}

.total-num {
  color: #02a7f0;
  font-size: 28px;
}

:deep(.dialog-from.el-dialog) {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

:deep(.dialog-from .el-dialog__header) {
  padding: 11px 17px;
  background-color: #f2f2f2;
  font-size: 18px;
}

:deep(.dialog-from .el-dialog__body) {
  padding-left: 48px;
  padding-right: 48px;
  padding-top: 20px;
}

.body-item {}

.box-title {
  margin-bottom: 10px;
}

:deep(.box-color) {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #027db4;
  margin-right: 10px;
}

.box-content {
  /* height: 80px; */
}

.row-item {
  height: 80px;
  /* margin-bottom: 20px; */
}

.input-time {
  border-radius: 4px;
  margin-top: 0;
  box-shadow: 0 0 0 1px #dcdfe6;
}

.input-time:hover {
  box-shadow: 0 0 0 1px #c0c4cc;
}

.upload-demo {
  position: relative;
  display: inline-block;
  width: 100%;
}

.upload-demo :deep(.el-upload) {
  width: 100%;
}

.input-upload {
  width: 100%;
}
</style>
